<template>
  <el-form-item label="API 名称">
    <el-row>
      <el-col :span="4">
        <div class="littleSelectBorder">
          <el-input v-model="groupName" maxlength="0" size="small" placeholder="选择分组" @focus="dialogVisibleGroup = true"></el-input>
          <!--<el-select v-model="dataArr.apiGroup" placeholder="请选择" size="small">-->
            <!--<el-option :label="item.value" :value="item.key" v-for="item of groupSelectData" :key="item.value"></el-option>-->
          <!--</el-select>-->
        </div>
      </el-col>
      <el-col :span="20">
        <el-input placeholder="请输入内容" size="small" v-model="dataArr.name" class="input-with-select" @blur="burlChangeVal"></el-input>
      </el-col>
    </el-row>
    <el-dialog
      v-if="dialogVisibleGroup"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      title="选择分组"
      :visible.sync="dialogVisibleGroup"
      width="30%">
      <div style="height: 500px;overflow-y: auto;border: 1px solid #eee;box-sizing: border-box;padding: 10px 8px;">
        <el-tree
          :highlight-current="true"
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="false">
          <span class="custom-tree-node" slot-scope="{ node, data }" @click="handelClickTreeNode(data)">
            <span class="treeSize">{{ data.name }}</span>
          </span>
        </el-tree>
      </div>
      <div style="margin-top: 16px;text-align: right;">
        <el-button size="small" type="primary" @click="saveGroupFun">确 认</el-button>
        <el-button size="small" @click="closeDialogFun">取 消</el-button>
      </div>
    </el-dialog>
  </el-form-item>
</template>

<script>
  import {
    getGroupList
  } from '@/api/apiModel/api.js'
  export default {
    name: 'apiName',
    props: ['form'],
    data() {
      return {
        groupName: '',
        copyGroupId: '',
        copyGroupName: '',
        postListroup: {
          'condition': [
          ],
          'sort': [
          ],
          'fields': []
        },
        dialogVisibleGroup: false,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        dataArr: this.form,
        groupSelectData: [
          {
            key: 0,
            value: '分组1'
          },
          {
            key: 1,
            value: '分组2'
          }
        ]
      }
    },
    mounted() {
      // 查询分组列表
      this.fetchData()
    },
    methods: {
      saveGroupFun() {
        this.groupName = this.copyGroupName
        this.dataArr.groupId = this.copyGroupId
        this.$emit('changeFormFun', this.dataArr)
        this.dialogVisibleGroup = false
      },
      closeDialogFun() {
        this.copyGroupName = ''
        this.copyGroupId = ''
        this.dialogVisibleGroup = false
      },
      handelClickTreeNode(node) {
        console.log(node)
        this.copyGroupName = node.name
        this.copyGroupId = node.id
      },
      fetchData() {
        getGroupList(this.postListroup, this.$store.state.user.projectId, '').then(res => {
          this.treeData = res.data.data
        })
      },
      burlChangeVal() {
        this.$emit('changeFormFun', this.dataArr)
      }
    }
  }
</script>

<style scoped>

</style>
